<template>
    <view class="columnbox content wdh-100">
        <view class="rowbox spb c-box" v-for="(item,index) in list" :key='index'>
            <image v-if="item.flag" class="sel-icon" src="/static/img/c-sel.png" mode="widthFix"></image>
            <image v-else class="sel-icon" src="/static/img/c-unsel.png" mode="widthFix"></image>
            <view class="columnbox c-info">
                <view class="rowbox wdh-100 c-detail spb">
                    <view class="columnbox c-desc als">
                        <view class="wdh-100 c-name">xxxx专用洗车券</view>
                        <view class="wdh-100 c-intro">使用说明：后台编辑说明内容，不编辑则不显示该内容</view>
                    </view>
                    <view class="rowbox c-price">¥30</view>
                </view>
                <view class="wdh-100 c-intro" style="margin-top: 20rpx;">券编号：23564547411</view>
                <view class="wdh-100 c-intro" style="margin-bottom: 20rpx;">有效期：至2025.03.07</view>
            </view>
        </view>
        <view class="wdh-100" style="height: 200rpx;"></view>
        <view class="rowbox bottom-box">
            <view class="rowbox pay-btn" @click="">确认</view>
        </view>
    </view>
</template>

<script>
    export default {
        data() {
            return {
                list: [{
                        flag: false
                    },
                    {
                        flag: true
                    }
                ]
            };
        }
    }
</script>

<style lang="scss" scoped>
    .content {
        font-family: PingFang SC;
        background: #F7F7F7;
        min-height: 100vh;
        justify-content: flex-start;
    }

    .c-box {
        border-radius: 20rpx;
        background: #fff;
        margin: 10rpx 0;
        width: 710rpx;
        overflow: hidden;
    }

    .sel-icon {
        width: 32rpx;
        height: 32rpx;
        margin-left: 40rpx;
    }

    .c-info {
        margin-left: 20rpx;
        width: calc(100% - 100rpx);
    }

    .c-detail {
        box-shadow: 0px 2px 3px 0px rgba(206, 206, 206, 0.4);
        padding: 0 20rpx;
        border-radius: 20rpx;
        padding-right: 0;

        .c-price {
            font-size: 32rpx;
            color: #fff;
            font-weight: bold;
            background: #1E72CA;
            height: 170rpx;
            width: 150rpx;
        }

        .c-desc {
            width: calc(100% - 190rpx);
        }

        .c-name {
            font-size: 32rpx;
            color: rgba(56, 148, 254, 1);
        }
    }

    .c-intro {
        margin-top: 10rpx;
        color: rgba(154, 154, 154, 1);
        font-size: 24rpx;
    }

    .bottom-box {
        position: fixed;
        bottom: 0;
        left: 0;
        background: #fff;
        padding: 20rpx 32rpx;
        padding-bottom: 40rpx;
        z-index: 9;
        border-top: #f2f5f5 solid 1px;
        width: 100%;
        justify-content: space-between;
    }

    .pay-btn {
        font-size: 28rpx;
        color: #fff;
        background: #1E72CA;
        border-radius: 10rpx;
        width: 100%;
        height: 90rpx;
    }
</style>